<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>家有梧桐</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 替换为你的花朵图片地址 */
            background-image: url('./img/梧桐树天空.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .scroll-box {
            width: 80%;
            height: 100px;
            margin: 20px auto;
            padding: 10px;
            border: 3px dotted rgba(255, 102, 153, 0.3);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
            
        }

        .scroll-content {
            color: #666; 
            position: absolute;
            width: 100%;
            animation: scroll 12s linear infinite;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
            text-align: center;
            font-size: 16px;
            line-height: 1.8;
        }

        @keyframes scroll {
            0% { top: 100%; }
            100% { top: -100%; }
        }
        
        /* ⭐新增右下角文字样式 */
        .footer-text {
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: #666;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
            line-height: 1.5;
            background: rgba(255, 255, 255, 0.7);
            padding: 8px 15px;
            border-radius: 5px;
            z-index: 1000;
        }        

        .container {
            
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        h1 {
            color: #ff6699;
            margin-bottom: 20px;
        }
        
        h2 {
            color: #ff6699;
            margin-bottom: 20px;
        }
        
        h3 {
            color: #ff6699;
            margin-bottom: 20px;
        }
        
        h4 {
            
            margin-bottom: 20px;
        }

        .music-player {
            margin-top: 20px;
        }

        audio {
            width: 300px;
            margin: 10px;
        }

        .controls {
            margin-top: 15px;
        }

        button {
            padding: 8px 20px;
            margin: 0 5px;
            border: none;
            border-radius: 20px;
            background: #ff6699;
            color: white;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #ff3385;
        }
    </style>
    <link rel="shortcut icon" href="./img/favicon.ico" />
</head>
<body>
    <div class="container">
        <h1>༺ཌ༈🌸家有梧桐🌸༈ད༻</h1>
        <div class="music-player">
            <!-- 修改点1：添加 autoplay 和 loop 属性 -->
            <audio id="myAudio" controls autoplay loop>
                <!-- 替换为你的音乐文件地址 -->
                <source src="./music/叶丽仪上海滩.flac" type="audio/flac">
                <source src="./music/叶丽仪上海滩.mp3" type="audio/mpeg"> 
                您的浏览器不支持音频播放
            </audio>
            <div class="controls">
                <button onclick="playAudio()">播放</button>
                <button onclick="pauseAudio()">暂停</button>
                <button onclick="stopAudio()">停止</button>
            </div>
            <h3>༺ཌ༈春晴🌸夏雨🌸秋来迎祥瑞༈ད༻</h3>
        </div>
            <!-- 🌟在音乐播放模块下方添加滚动框 -->
            <div class="scroll-box">
                <div class="scroll-content">
                    🌸 走过了风风雨雨，<br>
                    🌸 暮然回首，<br>
                    🌸 从青春到迟暮，<br>
                    🌸 始终是那一个人相伴，<br>
                    🌸 爱意暖暖。<br>
                    <br>
                    🌸 世上真挂心自己的有几个？<br>
                    🌸 唯家人而已。
                    
                </div>
            </div>
    </div>
    
    <div class="footer-text">
        🌸 背景音乐：上海滩·叶丽仪<br>
        🌸 背景图片：夏日·梧桐树<br>
        ©2025　家有梧桐　版权所有
    </div>

    <script>
        const audio = document.getElementById('myAudio');
        
        // 初始化音量设置（可选）
        audio.volume = 0.5;

        function playAudio() {
            audio.play();
        }

        function pauseAudio() {
            audio.pause();
        }

        function stopAudio() {
            audio.pause();
            audio.currentTime = 0;
        }

        // 修改点2：添加循环播放保障
        audio.addEventListener('ended', function() {
            this.currentTime = 0;
            this.play();
        });

        // 显示播放时间（控制台查看）
        audio.addEventListener('timeupdate', function() {
            const minutes = Math.floor(audio.currentTime / 60);
            const seconds = Math.floor(audio.currentTime % 60);
            console.log(`播放时间: ${minutes}:${seconds.toString().padStart(2, '0')}`);
        });
    </script>
</body>
</html>